<template>
  <el-tabs class="cron">

    <el-tab-pane label="分">
      <sel ref="sel_m" :value.sync="selVal.m" :min="0" :max="59" unit="分" label="分钟"/>
    </el-tab-pane>

    <el-tab-pane label="时">
      <sel ref="sel_h" :value.sync="selVal.h" :min="0" :max="59" unit="时" label="小时"/>
    </el-tab-pane>

    <el-tab-pane label="日">
      <sel ref="sel_dom" :value.sync="selVal.dom" :min="1" :max="31" unit="号" label="天"/>
    </el-tab-pane>

    <el-tab-pane label="月">
      <sel ref="sel_mon" :value.sync="selVal.mon" :min="1" :max="12" unit="月" label="月" :items="months"/>
    </el-tab-pane>

    <el-tab-pane label="周">
      <sel ref="sel_dow" :value.sync="selVal.dow" :min="1" :max="7" :hide-types="[1,3,4]" :items="weeks"/>
    </el-tab-pane>

  </el-tabs>
</template>

<script>
  import sel from "./sel";

  export default {
    name: "cron",
    components: {sel},
    props: {
      value: {
        type: String,
        default: "* * * * ?"
      }
    },
    data() {
      return {
        weeks: [
          {label: "周日", value: "1"},
          {label: "周一", value: "2"},
          {label: "周二", value: "3"},
          {label: "周三", value: "4"},
          {label: "周四", value: "5"},
          {label: "周五", value: "6"},
          {label: "周六", value: "7"},
        ],
        months: [
          {label: "一月", value: "1"},
          {label: "二月", value: "2"},
          {label: "三月", value: "3"},
          {label: "四月", value: "4"},
          {label: "五月", value: "5"},
          {label: "六月", value: "6"},
          {label: "七月", value: "7"},
          {label: "八月", value: "8"},
          {label: "九月", value: "9"},
          {label: "十月", value: "10"},
          {label: "十一月", value: "11"},
          {label: "十二月", value: "12"},
        ],
        selVal: {
          m: "*",
          h: "*",
          dom: "*",
          mon: "*",
          dow: "?",
        },
      };
    },
    methods: {
      sync() {
        let values = this.value.split(' ');
        let sel = ['m', 'h', 'dom', 'mon', 'dow'];
        for (let i = 0; i < sel.length && i < values.length; i++) {
          this.selVal[sel[i]] = values[i];
        }
      },
      onUpdate() {
        this.$emit(
          'update:value',
          this.selVal.m + " " + this.selVal.h + " "
          + this.selVal.dom + " " + this.selVal.mon + " " + this.selVal.dow)
      }
    },
    watch: {
      value() {
        this.sync();
      },
      selVal: {
        handler() {
          this.onUpdate();
        },
        deep: true,
      }
    }
  };
</script>

<style lang="less" scoped>
  .cron {
    padding: 0 16px;
    border-radius: 4px;
    background-color: #fff;

    div.el-tabs__content {
      div.el-tab-pane {
        form.el-form {
          div.el-radio-group {
            div.el-form-item {
              div.el-form-item__content {
                label.el-radio {
                  span.el-radio__label {
                    min-width: 80%;

                    div.el-select.el-select--mini {
                      min-width: 80%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>